<template>
  <div class="index">
    <commonHeader></commonHeader>

    <swiper :options="swiperOption" class="swiper-container swiper-container1 wow fadeInUp" ref="mySwiper"
      v-if="ListBanner.length">
      <swiper-slide class="swiper-item" v-for="item of ListBanner" :key="item.id">
        <img class="swiper-img" :src="item.banner" alt="" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination" v-if="ListBanner.length > 1"></div>
    </swiper>
    <div class="message wow fadeInUp">
      <div class="common-tit">
        <div class="text">花开惠元 蓄势新征</div>
      </div>
      <div class="message-con">
        春风激荡，万物新发，疫情的浓雾散去，惠元园子里的花开了。 <br>
        <br>
        这个春天，开始得很艰难，但是自然界的万物都在朝着光亮拼命生长，看看这绽放在春风里的粲然花朵，闻闻春风中来自花草的香气，生活日渐明朗起来。 <br>
        <br>
        每一次的危机和挑战，都是为更美好的明天做铺垫。面对更加多样化的后疫情时代，我们能做的，不仅是要精准布局积极应对，更要展现作为中国女性健康品牌引领者的新作为。 <br>
        <br>
        2020年是极为关键的一年，疫情之后，国家对大健康产业的长远发展规划陆续出台，女性强则中国强，女性健康产业已经成为我国医疗转型升级、高质量发展的新动能。 <br>
        <br>
        我们的惠元医院，经历长达一年多的精心升级，功能定位、运营模式、管理模式深度创新，医师团队建设、服务体系设计匠心打磨，我们以最真挚的心呈现着每一处细节的温度。 <br>
        <br>
        未来，惠元的医疗品质与服务品质依然是重中之重，同时我们不断加大技术投入，推动核心技术研发，聚焦全球女性健康，竭力使其具有专业性、前瞻性和全球性。 <br>
        <br>
        惠元的诞生，得到政府、股东和行业的大力支持，我们坚信疫情带来的是短期冲击，我们不仅要在顺势时快速发展，更要善于在逆境中丰盈羽翼。 <br>
        <br>
        合抱之木，生于毫末。站在新的历史起点，我们会以更加坚定的信念，以对生命的敬畏之心，积极布局女性生殖健康产业，专注提供安全、专业、关爱的医疗服务，为更多女性带去美丽、健康与幸福。
      </div>
      <div class="people">
        <div class="people-con">
          <div class="introduct">惠元品牌创始人 </div>
          <div class="name">
            <img src="~@/assets/img/lead-name2.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <div class="video-wrap wow fadeInUp">
      <div class="common-tit">
        <div class="text">视频</div>
      </div>
      <div class="video">
        <video :src="ListVideo.videos" controls="controls"></video>
      </div>
    </div>
    <commonFooter></commonFooter>
  </div>
</template>



<script lang="ts">
  // ajax
  import { HelloChildBanner } from "@/assets/js/api";

  import { Component, Vue } from "vue-property-decorator";
  import commonHeader from "@/components/headers.vue";
  import commonFooter from "@/components/footer.vue";
  @Component({
    name: "manager",
    components: {
      commonHeader,
      commonFooter,
    },
  })
  export default class manager extends Vue {



    // 头部banner
    ListBanner = [];
    // 视频
    ListVideo = [];
    swiperOption = {
      // 参数选项,显示小点
      pagination: ".swiper-pagination",
      paginationClickable: true,
      //循环
      loop: true,
      // 用户操作swiper之后，是否禁止autoplay
      autoplayDisableOnInteraction: false,
      //滑动速度
      speed: 1000,
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
    };

    get swiper(): any {
      console.log(this.$refs, "this.$refs.mySwiper1")
      return this.$refs.mySwiper.$swiper;
    }



    mounted() {
      let parameter = {
        bannerposition: 6,
        typename: "你好惠元-董事寄语",
      }
      HelloChildBanner(parameter).then((response: any) => {
        console.log(response.data, "HelloChildBanner")
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.ListBanner = data[0].ListBanner;
            this.ListVideo = data[0].ListContent[0];
            console.log(this.ListVideo, "ListVideo")

            this.$nextTick(() => {
              if (this.ListBanner.length <= 1) {
                this.swiper.autoplay.stop();
              }
            });
          }
        }
      });
    }
  }
</script>



<style lang="scss" scoped>
  @import '~@/assets/scss/manager.scss';
</style>